<template>
    <!-- 领标订单详情 -->
    <div class="box ">
        <h1>领标订单详情</h1>
        <hr>
        <div class="main clear">
            <div class="left">
                <div class="left-1">
                   
                        订单编号:
                        <div>
                            {{ data.number }}
                        </div>
                
                    <div>
                        订单类型:
                        <div>
                            {{ data.orderType.orderType }}
                        </div>
                    </div>
                    <div>
                        下单时间：
                        {{ data.createTime }}
                    </div>
                </div>
                <div class="left-2">
                    <!-- 接车司机 -->
                    <div class="selectStyleDiv">
                        取证司机:
                        <div class="selectStyleDiv clear">

                            <el-select v-model="driverArea" placeholder="选择区域" class="selectStyle"
                                @change="driverChange(driverArea)">
                                <el-option v-for="item in areaData" :key="item.id" :label="item.area"
                                    :value="item.area">
                                </el-option>
                            </el-select>

                            <el-select v-model="getDriver" placeholder="接车司机" class="selectStyle">
                                <el-option v-for="item in getDriverData" :key="item.id" :label="item.name"
                                    :value="item.name">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <!-- 还车司机 -->
                    <div>
                        还证司机:
                        <div class="selectStyleDiv clear">

                            <el-select v-model="reDriverArea" placeholder="选择区域" class="selectStyle"
                                @change="driverChange(reDriverArea)">
                                <el-option v-for="item in areaData" :key="item.id" :label="item.area"
                                    :value="item.area">
                                </el-option>
                            </el-select>

                            <el-select v-model="reDriver" placeholder="还车司机" class="selectStyle">
                                <el-option v-for="item in reDriverData" :key="item.id" :label="item.name"
                                    :value="item.name">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div>
                        检测场:
                        <div class="Bottom15px clear">
                            <el-select v-model="inspectArea" placeholder="选择区域" class="selectStyle"
                                @change="checkChange(inspectArea)">
                                <el-option v-for="item in areaData" :key="item.id" :label="item.area"
                                    :value="item.area">

                                </el-option>
                            </el-select>
                            <el-select v-model="inspectPlace" placeholder="请选择检测场" class="selectStyle">
                                <el-option v-for="item in inspectNameData" :key="item.id" :label="item.name"
                                    :value="item.name">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>

                <div>
                    派工单位:
                    <div>
                        <el-input v-model="workCompany" placeholder="请输入公司名称" class="input2"></el-input>
                    </div>
                </div>
                <div>
                    订单状态:
                    <div>
                        <el-select v-model="orderStatus" class="input2" @change="orderStatusChange(orderStatus)">
                            <el-option v-for="item in getStatusData" :key="item.id" :label="item.orderStatus"
                                :value="item.orderStatus">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div>
                    接车时间:
                    <div>
                        <el-input v-model="getCarTime" placeholder="请输入接车时间" class="input2"></el-input>
                    </div>
                </div>
                <div>
                    车牌号:
                    <div>
                        <el-input v-model="carId" placeholder="请输入车牌号" class="input2"></el-input>
                    </div>
                </div>
                <div>
                    接车地址:
                    <div>
                        <el-input v-model="receiveP" placeholder="请输入内容" class="input2"></el-input>
                    </div>
                </div>
            </div>


            <div class="middle">
                <div>
                    是否需要赔款:
                    <div class="Bottom15px">
                        <el-radio v-model="radio" label="1">是</el-radio>
                    </div>
                </div>
                <div>
                    是否发送短信:
                    <div class="Bottom15px">
                        <el-radio v-model="radio" label="1">是</el-radio>
                        <el-radio v-model="radio" label="2">否</el-radio>
                    </div>
                </div>
                <div>
                    还车地点:
                    <div>
                        <el-input v-model="returnP" placeholder="请输入内容" class="input2"></el-input>
                    </div>
                </div>

                <div>
                    客户备注:
                    <div>
                        <el-input v-model="tip" placeholder="请输入内容" class="input2"></el-input>
                    </div>
                </div>
                <div class="Bottom15px">
                    特定事项:
                    <div>
                        <el-input v-model="attention" class="Bottom15px input2"></el-input>
                    </div>
                </div>

                短信内容:
                <div class="Bottom15px">
                    <el-input type="textarea" :rows="4" class="textarea1" v-model="cusMessage">
                    </el-input>
                </div>
                <div class="clear">
                    <div class="message-left">短信操作:</div>
                    <div class="message-right">已发送0次</div>
                </div>
                <div class="Bottom15px clear">
                    <el-button type="primary" class="message-left">生成短信</el-button>
                    <el-button type="primary" class="message-right">发送给用户</el-button>
                </div>
                <div>
                    短信内容:
                    <div class="Bottom15px">
                        <el-input type="textarea" :rows="4" class="textarea1" v-model="cusMessage">
                        </el-input>
                    </div>
                    <div class="clear">
                        <div class="message-left">短信操作:</div>
                        <div class="message-right">已发送0次</div>
                    </div>
                    <div class="Bottom15px clear">
                        <el-button type="primary" class="message-left">生成短信</el-button>
                        <el-button type="primary" class="message-right">发送给司机</el-button>
                    </div>
                </div>













            </div>
            <div class="right">
                <div>
                    发动机编号:
                    <div>
                        <el-input v-model="engineNumber" placeholder="请输入发动机编号" class="input2"></el-input>
                    </div>
                </div>

                <div>
                    联系人:
                    <div>
                        <el-input v-model="contactPerson" placeholder="请输入内容" class="input2"></el-input>
                    </div>
                </div>
                <div>
                    联系电话:
                    <div>
                        <el-input v-model="contactPhone" placeholder="请输入内容" class="input2"></el-input>
                    </div>
                </div>

                <div>
                    登记人:
                    <div>
                        <el-input v-model="registerP" placeholder="请输入登记人" class="input2"></el-input>
                    </div>
                </div>
                <div>
                    <div>
                        预计还车时间:
                    </div>
                    <el-input v-model="returnTime" class="input2"></el-input>
                    <div>
                        拍照内容说明:
                    </div>
                    <el-input v-model="pictureDesc" class="input2"></el-input>
                    <div>
                        图片附件
                    </div>
                    <img src="" alt="">
                </div>
                <div class="right-1">
                    <ul class="pay1">
                        <li>支付单号:</li>
                        <li class="pay1-li">{{ orderInfo.number }}</li>
                        <li>支付方式:</li>
                        <li>微信支付/支付宝/xx银行</li>

                    </ul>

                    <ul class="pay">
                        <li>支付状态</li>
                        <li> {{ orderStatus }}</li>

                        <li>在线支付金额</li>
                        <li>0.00元data</li>
                        <li>优惠券付款</li>
                        <li>{{ orderInfo.coupon }}</li>
                    </ul>
                    <ul class="pay">
                        <li>订单总金额</li>
                        <li>{{ orderInfo.total }}</li>
                        <li>积分付款</li>
                        <li>{{ orderInfo.accumulatePoints }}</li>
                        <li>客服应付金额</li>
                        <li>0元data</li>
                    </ul>
                </div>



            </div>
        </div>
        <div class="save">

            <el-button type="primary" class="saveBtn" @click="orderAdd(
                orderId, number, getDriver, reDriver, orderStatus, workCompany, carId, inspectPlace,
                isMakeCompemsation, isSendMessage, attention, cusMessage, driMessage,
                getCarTime, engineNumber, contactPerson, contactPhone, registerP, receiveP,
                returnP, receiveMap, returnMap, tip, returnTime, pictureDesc, attachmentImg,
                photoAttachments, driverArea, reDriverArea, inspectArea
            )">保存</el-button>
            <el-button type="primary" @click="cancel" class="cancelBtn">取消</el-button>

        </div>
    </div>
</template>
    

<script>

export default {

    created() {
        this.selectAll();
        console.log('路由传参', this.$route.params)
        this.selectOrderDetail(this.$route.params.data.number, this.$route.params.data.orderType.orderType,)
        this.getStatus();

    },
    data() {
        return {
            //路由传参数据
            data: this.$route.params.data,
            // 通过订单号及类型查询信息
            orderInfo: '',
            order: '',
            orderDetail: '',
            //传到后台的的数据
            //订单号 及Id
            number: '',
            orderId: '',
            //接车司机
            //区域公用数据
            areaData: [],
            driverArea: '',
            reDriverArea: '',
            //取证司机
            getDriverData: [],
            getDriver: '',
            //还证司机
            reDriverData: [],
            reDriver: '',
            //支付状态、
            orderStatus: '',
            //派工单位
            workCompany: '',
            //车牌号
            carId: '',
            //修理厂公司,暂无数据

            // 检测场区域数据
            inspectArea: '',
            //检测场数据
            inspectPlace: '',
            inspectNameData: [],
            //不知道是啥
            isMakeCompemsation: true,
            //是否发送消息 未作绑定
            isSendMessage: true,
            //客户短信信息
            cusMessage: '',
            //司机短信信息
            driMessage: '',
            //不知道时啥数据  消息操作
            messageOperate: '2', //需要绑定
            //接车时间
            getCarTime: '',
            //发动机编号
            engineNumber: '',
            //联系人及其电话
            contactPerson: '',
            contactPhone: '',
            //特定事项
            attention: '',
            //登记人
            registerP: '',
            //接车地址
            receiveP: "",
            //还车地点
            returnP: '',
            //地图内容暂未做
            receiveMap: "5466.235,54489.23",
            returnMap: "36644.136,64455",
            //客户备注
            tip: "",
            //还车时间
            returnTime: '',
            //拍照内容说明
            pictureDesc: '',
            //图片附件
            attachmentImg: "/asjflak.jsp,/kjashfa.jpg",
            radio: '1',
            input: '',
            // 订单状态  下拉框
            getStatusData: '',
            //领标新增的：
            photoAttachments: "图片附件",


        }
    },
    methods: {
        //取消按钮
        cancel() {
            this.$router.push('/order')
        },
        //赋值函数
        fuZhi() {
            //请求后端的数据 赋值给当前页面
            this.order = this.data.number,
                // this.orderDetail= this.data.orderType.orderType,
                //传送后端的数据
                this.number = this.data.number;
            // this.driverArea = 
            this.getDriver = this.data.diver;
            this.reDriver = this.orderInfo.returnDriver;
            this.orderStatus = this.data.status.orderStatus;
            this.inspectArea = this.orderDetail.inspectPlace.area;
            this.inspectPlace = this.orderDetail.inspectPlace.name;
            this.attention = this.orderDetail.attention;
            this.cusMessage = this.orderDetail.clientMessageContent;
            this.driMessage = this.orderDetail.driverMessageContent;
            this.getCarTime = this.orderDetail.getCarTime;
            this.engineNumber = this.orderDetail.engineNumber;
            this.contactPerson = this.orderDetail.contactPerson;
            this.contactPhone = this.orderDetail.contactPhone;
            this.registerP = this.orderDetail.registerPerson;
            this.receiveP = this.orderDetail.receivePosition;
            this.returnP = this.orderDetail.registerPerson;
            this.driverArea = this.data.driverArea
            //地图行程暂未做
            //this.receiveMap = this.orderDetail.receiveMap;
            //this.returnMap = this.orderDetail.returnMap;
            this.tip = this.orderDetail.tip
            this.returnTime = this.orderDetail.returnTime;
            this.pictureDesc = this.orderDetail.pictureDesc;
            this.orderId = this.orderInfo.id;

            this.workCompany = this.data.workCompany;
            this.carId = this.orderDetail.plateNo
            this.driverArea = this.orderDetail.forensicsDriverArea
            this.reDriverArea = this.orderDetail.alsoTheDriverArea
            // orderInfo,orderDetail
            // this.createTime = this.data.

        },

        //保存验车订单
        orderAdd(
            orderId, number, forensicsDriver, alsoTheDriver, orderStatus, orderWorkCompany, plateNo, inspectPlace,
            isMakeCompemsation, isSendMessage, attention, clientMessageContent, driverMessageContent,
            getCarTime, engineNumber, contactPerson, contactPhone, registerPerson, receivePosition,
            returnPosition, receiveMap, returnMap, tip, returnTime, pictureDesc, attachmentImg,
            photoAttachments, forensicsDriArea, alsoDriArea, inspectArea
        ) {
            this.$http({
                url: '/bringTheOrder/update',
                method: 'POST',
                data: {
                    orderId, number, forensicsDriver, alsoTheDriver, orderStatus, orderWorkCompany, plateNo, inspectPlace,
                    isMakeCompemsation, isSendMessage, attention, clientMessageContent, driverMessageContent,
                    getCarTime, engineNumber, contactPerson, contactPhone, registerPerson, receivePosition,
                    returnPosition, receiveMap, returnMap, tip, returnTime, pictureDesc, attachmentImg,
                    photoAttachments, forensicsDriArea, alsoDriArea, inspectArea
                },
            })
                .then((res) => {
                    console.log('验车订单修改成功', res)
                })
                .catch((err) => {
                    console.log('验车订单修改失败', err)
                })
            this.$router.push('/order');
        },

        // 查询所有区域
        selectAll() {
            this.$http({
                url: '/area/selectAll',
                method: 'POST',
            })
                .then((res) => {
                    console.log('查询所有区域数据成功', res.data.data);
                    this.areaData = res.data.data

                })
                .catch((err) => {
                    console.log('查询所有区域获取失败', err);
                })
        },
        // 联动区域查询司机 
        selectDriver(areaName) {
            this.$http({
                url: '/area/selectDriver',
                method: 'GET',
                params: {
                    areaName
                }
            })
                .then((res) => {
                    console.log('联动区域查询司机数据成功', res.data.data[0]);

                    this.getDriverData = res.data.data[0];
                    this.reDriverData = res.data.data[0];
                })
                .catch((err) => {
                    console.log('联动区域查询司机失败', err);
                })
        },
        driverChange(areaName) {
            // item.area
            console.log('传入的值', areaName)
            this.selectDriver(areaName)
        },
        //联动区域查询此区域的修理厂
        selectRepairF(areaName) {
            this.$http({
                url: '/area/selectRepairF',
                method: 'GET',
                params: {
                    areaName
                }
            })
                .then((res) => {
                    console.log('联动区域查询此区域的修理厂数据成功', res.data.data[0]);
                    this.inspectNameData = res.data.data[0]
                })
                .catch((err) => {
                    console.log('联动区域查询此区域的修理厂失败', err);
                })
        },
        checkChange(inspectArea) {
            this.selectRepairF(inspectArea);
        },
        //点击订单编号跳转页面 
        selectOrderDetail(number, type) {
            console.log('传入的编号类型', number, type)
            this.$http({
                url: '/order/selectOrderDetail',
                method: 'POST',
                data: {
                    number, type
                }
            })
                .then((res) => {
                    this.orderInfo = res.data.order;
                    this.orderDetail = res.data.orderDetail;
                    this.fuZhi();
                    console.log('新页面', res.data)
                    console.log('新页面order', this.orderInfo)
                    console.log('新页面detail', this.orderDetail)

                })
                .catch((err) => {
                    console.log('跳转订单失败', err)
                })
        },
        // 下拉选择框，获取订单状态
        getStatus() {
            this.$http({
                url: '/order/getStatus',
                method: 'GET',
            })
                .then((res) => {
                    console.log('订单状态数据', res.data);
                    this.getStatusData = res.data.data
                })
                .catch((err) => {
                    console.log('订单状态获取失败', err);
                })
        },


    },

}


</script>

<style lang="scss" scoped>
.box {
    min-width: 1200px;
    height: 1000px;

    h1 {
        font-size: 30px;
    }

    hr {
        margin: 20px 0 20px 0;
        border-top: 2px solid rgba(128, 128, 128, 0.753);
    }


    .main {
        margin: 0 auto;
        width: 1200px;

        .left {
            min-width: 300px;

            float: left;

            .selectStyleDiv {
                margin: 15px 0px 20px 0;
            }

            .left-1 {

                min-width: 300px;

                div {
                    margin-top: 10px;
                }
            }
        }

        .middle {
            min-width: 300px;
            margin-left: 150px;
            float: left;

            .message-left {
                float: left;
            }

            .message-right {
                float: right;
            }
        }

        .right {
            float: left;

            margin-left: 150px;
            min-width: 260px;
        }
    }

    .Bottom15px {
        margin: 15px 0px 15px 0;
    }

    .selectStyle {
        float: left;
        margin-right: 20px;
        width: 120px;
    }

    .input2 {
        width: 260px;
        margin: 15px 0px 15px 0;
    }

    .textarea1 {
        width: 260;
        height: 90px;
    }


    .pay {
        float: left;
    }

    .pay1-li {
        width: 260px;
    }

    .pay li,
    .pay1 li {
        margin: 13px 10px 10px 10px;
    }

    .right-1 {
        height: 400px;
    }
}

.save {
    text-align: center;
    padding: 30px 0;

    .saveBtn {
        margin-right: 50px;
        margin-left: -50px;
    }

    .cancelBtn {
        margin-left: 50px;
    }

}
</style>